<template>
    <div>
        <dv-border-box-10 style="width: 30vw;height: 30vh;">
            <div class="content">
                <div class="title">
                    <dv-decoration-3 class="decoration1"/>
                    <h6 style="margin: 0;font-size: 20px;text-align: center;color: white">智慧大棚土壤实时环境监测</h6>
                    <dv-decoration-3 class="decoration1"/>
                </div>
                <div class="temper-info">
                    <dv-border-box-4 class="left-border">
                        <dv-charts :option="option1" class="chart"></dv-charts>
                        <div class="temper-type">
                            <dv-border-box-12 class="temper-type-border">
                                <p class="text">空气温度</p>
                            </dv-border-box-12>
                        </div>
                    </dv-border-box-4>
                    <dv-border-box-4 :reverse="true" class="right-border">
                        <dv-charts :option="option2" class="chart"></dv-charts>
                        <div class="temper-type">
                            <dv-border-box-12 class="temper-type-border">
                                <p class="text">空气湿度</p>
                            </dv-border-box-12>
                        </div>
                    </dv-border-box-4>
                </div>
                
            </div>
        </dv-border-box-10>
    </div>
</template>

<script setup lang="ts">

import {onMounted, ref, watch} from "vue";
import axios from "@/Api/axiosInterceptor.ts";
import {headerConfig} from "@/Api/HeaderConfig.ts";
import {UPDATE_TIME} from "@/utils/UpdateTime.ts";

let air_temperature = ref<number>(0);
let air_humidity = ref<number>(0);

onMounted(()=>{
    // 初始获取数据
    fetchData();
    // 设置定时器每3分钟获取数据
    setInterval(fetchData, UPDATE_TIME);
});
function fetchData() {
  axios.get(`http://localhost:8080/api/sensor-datas/device/8`, headerConfig)
    .then((response) => {
      air_temperature.value = response.data.value;
    })
    .catch((error) => {
      console.log(error);
    });

  axios.get(`http://localhost:8080/api/sensor-datas/device/9`, headerConfig)
    .then((response) => {
      air_humidity.value = response.data.value;
    })
    .catch((error) => {
      console.log(error);
    });
}

const option1 = ref({
    series: [
        {
            type: 'gauge',
            data: [{ name: 'itemA', value: air_temperature.value }],
            axisLabel: {
                formatter: '{value}℃',
            },
            animationCurve: 'easeInOutBack',
            min: 0,
            max: 50,
        }
    ]
});

const option2 = ref({
    series: [
        {
            type: 'gauge',
            data: [{ name: 'itemA', value: air_humidity.value }],
            axisLabel: {
                formatter: '{value}',
            },
            animationCurve: 'easeInOutBack',
            min: 0,
            max: 100,
        }
    ]
});
// 监视 air_temperature 的变化并更新 option1
watch(air_temperature, (newVal) => {
    option1.value.series[0].data[0].value = newVal;
});

// 监视 air_humidity 的变化并更新 option2
watch(air_humidity, (newVal) => {
    option2.value.series[0].data[0].value = newVal;
});
</script>

<style scoped>
.content{
    padding-top: 2vh;
}
.title {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.decoration1 {
    width: 8vw;
    height: 2vh;
}
.left-border {
    width: 15vw;
    height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.right-border {
    width: 15vw;
    height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.temper-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


.temper-type-border {
    width: 10vw;
    height: 4vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.temper-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text{
    margin: 0;
    padding-top: 1vh;
    text-align: center;
    
    color: white;
}
.chart {
    width: 14vw;
    height: 18vh;
}
</style>